<template>
  <div class="bg-white w-full max-w-9xl rounded-lg p-5 mb-5">
    <div class="flex flex-col items-center p-3 h-[85vh]">
      <div class="flex justify-between items-center w-full max-w-9xl mt-5">
        <a-breadcrumb class="flex items-center">
          <home-outlined />
          <span class="mx-2">当前位置:&nbsp;&nbsp;</span>
          <a-breadcrumb-item>
            <a href="/" class="text-blue-500 hover:underline">首页</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <router-link to="/popsci" class="text-blue-500 hover:underline">科普知识</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>入侵物种名录</a-breadcrumb-item>
        </a-breadcrumb>
      </div>

      <h2 class="text-2xl font-bold text-center mb-5">入侵物种名录</h2>

      <div class="w-full max-w-9xl h-[60px]">
        <!-- 使用提取的组件 -->
        <directory-table
          :columns="columns"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { HomeOutlined } from '@ant-design/icons-vue';
import {onMounted, ref} from 'vue';
import DirectoryTable from "../DataTable/directoryTable.vue";

const columns = [
  {
    title: '完整学名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '中文名',
    dataIndex: 'cname',
    key: 'cname',
  },
  {
    title: '国家/组织国家/地区',
    dataIndex: 'country',
    key: 'country',
  },
  {
    title: '类型',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '更新时间',
    dataIndex: 'data',
    key: 'data',
  },
];

onMounted(() => {
  document.title = '农业外来入侵物种防控与管理平台';
});
</script>

<style scoped>
</style>
